<template>
	<div class="bg-white px-3 goods_create" style="margin: -20px;margin-top: -1rem;margin-bottom: 0 !important;">
		<router-link :to="{name: 'shop_goods_list'}"
		style="position: absolute;top: 12px;left: 200px;">
			<el-button type="primary" size="mini">回到商品列表</el-button>
		</router-link>
		

		<div class="d-flex flex-wrap">
			<div class="border rounded d-flex align-items-center justify-content-center mr-3 mb-3" 
			style="width: 200px;height: 200px;cursor: pointer;position: relative;"
			v-for="(item, index) in banners" :key="index"
			@click="chooseImage(index)">
				<img v-if="item.url" :src="item.url" style="width: 100%;" />
				<div style="height: 30px;width: 100%;background-color: rgba(0,0,0,0.4);color: #FFFFF;position: absolute;left: 0;bottom: 0;right: 0;">
					{{item.name}}
				</div>
				<i class="el-icon-delete p-2 text-white"
				style="position: absolute;top: 0;right: 0;background-color: rgba(0,0,0,0.4);"
				@click.stop="deleteImage(index)"></i>
			</div>
			<div v-if="banners.length < 9" class="border rounded d-flex align-items-center justify-content-center mr-3 mb-3"
			style="width: 200px;height: 200px;cursor: pointer;"
			@click="chooseImage(-1)">
				<i class="el-icon-plus text-muted" style="font-size: 40px;"></i>
			</div>
		</div>
		
		<el-button type="primary" style="position: fixed;right: 50px;bottom: 50px;"
		@click="submit">提交</el-button>
	</div>
</template>

<script>
	import {mapState, mapMutations} from "vuex"

export default {
	
	
	inject:['app', 'layout'],
	
	computed: {
		...mapState({
			goods_id: state=>state.goodsCreate.goods_id
		})
	},

	created() {
		//页面加载时读取sessionStorage中的状态信息
		if(sessionStorage.getItem('store')) {
			this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))))
		}
		//在页面刷新时，将vuex中的信息保存到sessionStorage
		window.addEventListener('beforeunload', ()=>{
			sessionStorage.setItem('store', JSON.stringify(this.$store.state))
		})
		if(this.$route.params.id) {
			this.vModel('goods_id', this.$route.params.id)
		}
		if(!this.goods_id) {
			this.$message({
				message: '非法参数',
				type: 'error'
			});
			return this.$router.push({
				name: "shop_goods_list"
			})
		}	
		this.layout.showLoading()
		this.axios.get('/admin/goods/read/' + this.goods_id, {token: true}).then(res => {
			this.banners = res.data.data.goodsBanner
			this.layout.hideLoading()
		}).catch(err => {
			this.layout.hideLoading()
		})
	},
	
	data() {
		return {
			banners: [],
		}
	},
	
	methods: {
		...mapMutations(['vModelState']),
		//修改表单数据
		vModel(key, value) {
			this.vModelState({key: key,value: value})
		},
		
		//submit
		submit() {
			this.layout.showLoading()
			this.axios.post('/admin/goods/banners/' + this.goods_id, {
				banners: this.banners.map(v => v.url)
			},{token: true}).then(res => {
				this.$message({
					message: '修改商品轮播图成功',
					type: 'success'
				});
				this.layout.hideLoading()
				this.$router.push({
					name: "shop_goods_list"
				})
			}).catch(err => {
				this.layout.hideLoading()
			})
		},
		
		//选择图片
		chooseImage(index) {
			const MAX = 9
			let count = MAX - this.banners.length
			this.app.showImageModel((res) => {
				let list = []
				if (index === -1) { //选择图片
					list = [...this.banners, ...res]
				} else {
					list = [...this.banners]
					list[index] = res[0]
				}
				this.banners = list
			}, index === -1 ? count : 1)
		},
		
		//删除图片
		deleteImage(index) {
			this.$confirm('确定删除该图片, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.banners.splice(index, 1)
				this.$message({
				type: 'success',
				message: '删除成功!'
				});
			}).catch(() => {
				this.$message({
				type: 'info',
				message: '已取消删除'
				});
			});
		},
	},
	

}
</script>

<style>
	.goods_create .el-form-item{
		margin-bottom: 15px;
	}
</style>
